<!-- 页面 -->
<template>
  <div>
    <el-table :data="paginatedData" border style="width: 100%" class="center-table">
      <el-table-column prop="operationUser" label="操作人" align="center">
      </el-table-column>
      <el-table-column prop="operationObject" label="操作对象" align="center">
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型" align="center">
      </el-table-column>
      <el-table-column prop="operationTime" label="操作时间" align="center">
      </el-table-column>
      <el-table-column prop="operationStatus" label="操作结果" align="center">
      </el-table-column>
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <el-button size="mini" @click="openDetailsDialog(scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="danger" @click="deleteRow(scope.row.operationUser)" v-if="userRole === 'admin'">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <!-- 详情弹出层 -->
    <el-dialog
      :visible.sync="detailsDialogVisible"
      title="操作详情"
      width="520px"
      class="dark-detail-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      append-to-body
    >
      <div class="detail-content">
        <div class="detail-row">
          <span class="detail-label">操作人：</span>
          <span class="detail-value">{{ detailsForm.operationUser }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">操作对象：</span>
          <span class="detail-value">{{ detailsForm.operationObject }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">操作类型：</span>
          <span class="detail-value">{{ detailsForm.operationType }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">操作时间：</span>
          <span class="detail-value">{{ detailsForm.operationTime }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">操作结果：</span>
          <span class="detail-value">{{ detailsForm.operationStatus }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false" class="dark-btn">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { systemTargetList, systemtgetList, systemupdategetList, systemdeletegetList } from "@/api/user/userlog.js"; // 引入接口方法
  import EventBus from "@/eventBus.js";
  import operateitem from "./item/userlogitem.vue"; // 引入操作日志编辑组件
  import { mapState } from "vuex";
  export default {
    components: { operateitem },
    data() {
      return {
        receivedName: "",
        operationLogs: [],
        paginatedData: [], // 当前页数据
        total: 0,
        pageSize: 10,
        currentPage: 1,
        detailsDialogVisible: false,
        detailsForm: {}, // 详情数据
      };
    },
    computed: {
      ...mapState(["userRole"])
    },
    beforeDestroy() {
      if (EventBus && EventBus.$off) {
        EventBus.$off("custom-event");
      }
    },
    created() {
      
      EventBus.queue.forEach((name) => {
        console.log("处理队列中的工具名称:", name); // 确认 name 是否正确
        this.receivedName = name;
        this.fetchOperationLogs();
      });
      EventBus.queue = []; // 清空队列
      EventBus.$on("send-to-operate", (name) => {
        console.log("接收到的工具名称:", name);
        this.receivedName = name;
        this.fetchOperationLogs();
      });
      
    },
    mounted() {
      this.getSystemTargetList();
    },
    methods: {
      async getSystemTargetList() {
        try {
          const response = await systemTargetList();
          this.operationLogs = response;
          this.total = this.operationLogs.length;
          this.currentPage = 1;
          this.updatePaginatedData();
          console.log("操作日志数据:", this.operationLogs);
        } catch (error) {
          console.error("获取操作日志失败:", error);
        }
      },
      async fetchOperationLogs() {
        console.log("fetchOperationLogs 接收到的工具名称:", this.receivedName); // 确认参数
        if (!this.receivedName) {
          console.error("工具名称为空，无法执行接口调用");
          return;
        }
        try {
          const response = await systemtgetList({
            operationObject: this.receivedName,
            operationType: "下载",
          });
          this.operationLogs = response.data;
          this.total = this.operationLogs.length;
          this.currentPage = 1;
          this.updatePaginatedData();
          console.log("操作日志数据:", this.operationLogs);
        } catch (error) {
          console.error("获取操作日志失败:", error);
        }
      },
      updatePaginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.paginatedData = (this.operationLogs || []).slice(start, end);
      },
      handleSizeChange(newSize) {
        this.pageSize = newSize;
        this.currentPage = 1;
        this.updatePaginatedData();
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
        this.updatePaginatedData();
      },
      async handleEditSubmit(formData) {
        try {
          const response = await systemupdategetList(formData);
          console.log("编辑成功:", response);
          this.$message.success("编辑成功");
          this.getSystemTargetList(); // 刷新列表
        } catch (error) {
          console.error("编辑失败:", error);
          this.$message.error("编辑失败，请稍后再试");
        }
      },
      openDetailsDialog(row) {
        this.detailsForm = { ...row }; // 数据回显
        this.detailsDialogVisible = true; // 打开详情弹出层
      },
      async deleteRow(operationUser) {
        try {
          await this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          });
          const response = await systemdeletegetList({ userName: operationUser });
          console.log("删除成功:", response);
          this.$message.success("删除成功");
          this.getSystemTargetList(); // 刷新列表
        } catch (error) {
          console.error("删除失败:", error);
          this.$message.error("删除失败，请稍后再试");
        }
      },
    },
  };
</script>

<style scoped>
.pagination {
  margin-top: 20px;
  text-align: right;
}
.center-table .el-table__cell {
  text-align: center;
}
.center-table {
  background: #f8fafc !important;
  border-radius: 10px !important;
  color: #232526 !important;
  box-shadow: 0 2px 12px #b3c6e822;
}
.center-table ::v-deep .el-table__header,
.center-table ::v-deep .el-table__body {
  background: #f8fafc !important;
  color: #409eff !important;
}
.center-table ::v-deep th,
.center-table ::v-deep td {
  background: #f8fafc !important;
  color: #232526 !important;
  border-bottom: 1px solid #b3c6e8 !important;
}
.center-table ::v-deep .el-table__row:hover > td {
  background: #e9f0fb !important;
  color: #409eff !important;
}
.center-table ::v-deep .el-table__body tr.current-row > td {
  background: #e9f0fb !important;
  color: #409eff !important;
}
.center-table ::v-deep .el-table__body-wrapper {
  border-radius: 10px !important;
}
.center-table ::v-deep .el-table__column-resize {
  background: #409eff !important;
}
.center-table ::v-deep .el-table__row .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #409eff !important;
  border-color: #53caff !important;
}
.center-table ::v-deep .el-checkbox__inner {
  background: #f8fafc !important;
  border: 1.5px solid #409eff !important;
}
.center-table ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #fff !important;
}
.dark-detail-dialog ::v-deep .el-dialog__header,
.dark-detail-dialog ::v-deep .el-dialog__body,
.dark-detail-dialog ::v-deep .el-dialog__footer {
  background: #f8fafc !important;
  color: #232526 !important;
  border-radius: 14px;
  border: 1.5px solid #b3c6e8;
}
.dark-detail-dialog ::v-deep .el-dialog {
  border-radius: 14px;
  border: 1.5px solid #b3c6e8;
  background: #f8fafc !important;
}
.dark-detail-dialog ::v-deep .el-dialog__title {
  color: #409eff !important;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}
.detail-content {
  padding: 18px 8px 8px 8px;
  background: #fff;
  border-radius: 10px;
  color: #232526;
  box-shadow: 0 1px 8px #b3c6e822;
}
.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.detail-label {
  min-width: 90px;
  color: #409eff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
}
.detail-value {
  color: #232526;
  font-size: 15px;
  word-break: break-all;
}
.dark-btn {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 22px;
  transition: background 0.18s, box-shadow 0.18s;
}
.dark-btn:hover {
  background: linear-gradient(90deg, #53caff 60%, #409eff 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px #b3c6e822;
}
</style>
